<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>智慧社区-社区报修</title>

    <!-- Bootstrap -->
    <link href="<s:url value="/assets/front/css/bootstrap.min.css"></s:url>" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<s:url value="/assets/front/css/common.css"></s:url>" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<%@include file="/WEB-INF/views/front/include/menu.jsp"%>
    <div class="container" style="background-color: #ffffff;margin-top: 20px" >
        <div class="row" style="margin-top: 20px"></div>
        <div class="panel panel-default" style="margin-left:10px;margin-right: 10px;">
            <div class="panel-heading">
                <h3 class="panel-title">我的报修记录</h3>
            </div>
            <div class="panel-body">
                <div class="table-responsive ">
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>报修问题</th>
                            <th>报修联系方式</th>
                            <th>报修地址</th>
                            <th>维修状态</th>
                            <th>维修人</th>
                            <th>维修人联系方式</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${repairs}" var="repair">
                        <tr>
                            <td>${repair.problem}</td>
                            <td>${repair.tel}</td>
                            <td>${repair.address}</td>
                            <td>${repair.replyState}</td>
                            <td>${repair.replyPeople}</td>
                            <td>${repair.replyTel}</td>
                        </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="panel panel-default" style="margin-left:10px;margin-right: 10px;">
            <div class="panel-heading">
                <h3 class="panel-title">我要报修</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/pass/repair/create" id="repair-form" method="post">

                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right" for="problem"><font color="red">*</font>问题</label>
                        <div class="col-sm-8">
                            <input type="text" name="problem" id="problem" placeholder="请输入报修问题" class="form-control required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right" for="address"><font color="red">*</font>报修地址</label>
                        <div class="col-sm-8">
                            <input type="text" name="address" id="address" placeholder="请输入报修地址" class="form-control required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right" for="tel"><font color="red">*</font>联系电话</label>
                        <div class="col-sm-8">
                            <input type="text" name="tel" id="tel" placeholder="请输入联系电话"   class="form-control required">
                        </div>
                    </div>

                </form>
                <h3 class="header smaller lighter green"></h3>
                <div class="text-center">
                    <button class="btn btn-info" id="save">提交</button>
                </div>
            </div>
        </div>
    </div>



<%@include file="/WEB-INF/views/front/include/footer.jsp"%>
<script src="<s:url value="/assets/js/valid/jquery.validate.js"></s:url>"></script>
<script src="<s:url value="/assets/js/valid/messages_cn.js"></s:url>"></script>
<script type="text/javascript">
    $("#save").click(function () {
        save();
    });

    function save() {
        if($("#repair-form").valid()) {
            var problem = $('#problem').val();
            var address = $('#address').val();
            var tel = $('#tel').val();
            $.ajax({
                type : "post",
                url : "${pageContext.request.contextPath}/pass/repair/create",
                data: {"problem":problem,"address":address,"tel":tel },
                dataType : "json",
                success : function(datas) {
                    if(datas.code == '200'){
                        location.reload();
                    } else if(datas.code == '500') {
                        alert(datas.message);
                    } else {
                        location.href = "${pageContext.request.contextPath}/login";
                    }
                },
                error :function(xhr) {
                    location.href = "${pageContext.request.contextPath}/login";
                }
            });
        }

    }
</script>
</body>
</html>
